.root {
  display: inline-block;
  text-decoration: none;
  position: relative;
  border: none;
  color: var(--alinea-button-foreground);
  background: var(--alinea-button-background);
  font: inherit;
  cursor: pointer;
  z-index: 0;
  font-size: 13px;
  transition: 0.25s ease-out;

  &.is-medium {
    min-height: 22px;
    padding: 7px 16px;
    border-radius: 5.5px;
  }

  &.is-large {
    min-height: 26px;
    font-size: 14px;
    padding: 6px 13px;
    border-radius: 16px;
  }

  &:hover {
    background: var(--alinea-button-hover);
  }

  &.is-outline {
    color: var(--alinea-variant-info-foreground);
    background: var(--alinea-variant-info-action);

    &:hover {
      background: var(--alinea-variant-info-action);
    }
  }

  &.is-disabled {
    opacity: 0.5;
    pointer-events: none;
  }
}
